<template>
  <div class="goods-item" @click="onNavigate">
    <div class="pic">
      <image-pic fill="cover" align="center" width="180" height="180" :src="img" />
    </div>
    <p class="title2" style="font-family: MiSans, MiSans;font-weight: 400;font-size: 13px;color: #666666;">倒计时：00:24:36</p>
    <p class="title">{{ title }}</p>
    <div class="num">
      <span class="num__now">¥156</span>
      <span class="num__old">抢</span>
    </div>  
  </div>
</template>

<script>

export default {
  // eslint-disable-next-line vue/require-prop-types
  props: ['goodsId', 'img', 'title', 'desc', 'price', 'discount', "goodList","show"],
  data() {
    return {
      showDialog: true,
      showDialog1:false
    }
  },
  methods: {
    onNavigate() {
    
      this.show = true
      // Dialog.alert({
      //   title: '',
      //   message: '弹窗内容',
      //   theme: 'round-button',
      //   className:"classNameDialog"
      // }).then(() => {
      //   // on close
      // });
      // this.$router.push({
      //   path: `/detail/${this.goodsId}`
      // })
    },
  
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';



.van-dialog .van-goods-action-button--danger {
  background: $dialog-confirm-button-text-color;
}

.van-dialog .van-button--danger {
  background-color: $van-button--danger;
}

.classNameDialog {
  background-color: #389138 !important;
}

.goods-item {
  position: relative;
  width: 360px;
  overflow: hidden;

  .pic {
    display: block;
    padding: 14px;
    border-radius: 8px;
    // background: #f5f5f5;
  }

  .title {
    padding-left: 14px;
    padding-top: 0px !important;
    // font-size: $small;
    // color: $black;
    width: 320px;
    height: 80px;
    font-family: MiSans, MiSans;
    font-weight: 400;
    font-size: 30px;
    color: #151515;
    line-height: 40px;
    // text-align: center;
    // @include text-ellipsis;
  }

  .title2 {
    padding-left: 14px;
    padding-top: 0px !important;
    // font-size: $small;
    // color: $black;
    width: 320px;
    height: 40px;
    font-family: MiSans, MiSans;
    font-weight: 400;
    font-size: 30px;
    color: #151515;
    line-height: 40px;
    // text-align: center;
    // @include text-ellipsis;
  }


  .desc {
    padding: 14px;
    padding-top: 0;
    font-size: $small;
    color: $gray;
    text-align: center;
    @include text-ellipsis;
  }

  .num {
    padding-bottom: 14px;
    // text-align: center;
    padding: 14px;
    // font-size: $small;
    color: #2E512E;
    display: inline-block;

    .num__now {
      font-family: DIN-Medium, DIN;
      font-size: 34px;
      font-weight: 600;
      margin-right: 10px;
      width: 122px;
    }

    .num__old {
      font-family: DIN-Medium, DIN;
      // font-size: 24px;
      font-weight: 400;
      // color: $gray;
      // text-decoration: line-through;
      margin-right: 10px;
      float: right;
      width: 100px;
      height: 52px;
      background: #389138;
      border-radius: 24px 0px 0px 24px;
      margin-left: 125px;
      text-align: center;
      font-size: 32px;
      color: #FFFFFF;
      justify-content: center;
      line-height: 52px;

    }
  }

  .btn-wrapper {
    display: inline-block;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-bottom: 24px;

    .btn {
      background: $red;
      color: #fff;
      border: none;
    }
  }
}
</style>
